<template>
  <div class="operation-config">
    <div class="operation-config-left">
      <div class="operation-config-title">已配置组件</div>
      <div class="group-list-wrap">
        <div
          v-for="(item, index) in componentConfigurationModel.siderbarConfig"
          :key="index"
          class="group-item"
        >
          <div
            class="group-item-header"
            @click="changeShowComps(index)"
          >
            <div class="header-left">
              {{ item.cnName }}
            </div>
            <div class="header-right">
              <ArrowUp
                v-if="item?.showComps"
                style="width: 1em; height: 1em; margin-left: 8px; cursor: pointer"
              />
              <ArrowDown
                v-if="!item?.showComps"
                style="width: 1em; height: 1em; margin-left: 8px; cursor: pointer"
              />
            </div>
          </div>
          <div
            v-if="item.showComps"
            class="group-item-children"
          >
            <div
              v-for="(comp, compIndex) in item.children"
              :key="compIndex"
              class="comp-item"
              :style="{ cursor: componentConfigurationModel.isModelDisabled ? 'not-allowed' : 'pointer' }"
              :class="{ active: currentParentIndex === index && currentIndex === compIndex }"
              @click="handleClickItem(index, compIndex, comp)"
            >
              <img
                class="comp-item-img"
                :src="comp?.icon"
              />
              <div class="comp-item-label">{{ comp?.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="operation-config-right">
      <div class="operation-config-title">设置组件操作项及标签</div>
      <div class="operation-wrap">
        <div class="operation-label">选择组件操作项:</div>
        <div class="operation-select">
          <el-select
            v-model="selectedOperation"
            clearable
            :suffix-icon="SelectSuffix"
            placeholder="选择操作项"
            size="default"
            :disabled="Object.keys(componentConfigurationModel.currentSelected).length === 0"
            @visible-change="handleOperationVisibletChange"
            @change="handleOperationSelectChange"
          >
            <el-option
              v-for="item in componentConfigurationModel.operationsOptions"
              :key="item.siderbarKey"
              :value="item.operation"
              :label="item.operation"
            >
              <div style="display: flex; height: 100%; align-items: center; margin-right: 5px; min-height: 22px">
                <img
                  v-if="item.icon"
                  :src="item.icon"
                  width="14"
                  height="14"
                  style="object-fit: contain"
                />
                <span style="margin-left: 4px">{{ item.operation }}</span>
              </div>
            </el-option>
          </el-select>
        </div>
        <div class="operation-label">
          <span>选择组件标签:</span>
          <el-tooltip
            content="标签是组件的子分组"
            placement="bottom"
            effect="dark"
          >
            <QuestionFilled
              class="g-theme-color"
              style="width: 16px; height: 16px; margin-left: 8px; cursor: pointer"
            />
          </el-tooltip>
        </div>
        <div class="operation-select">
          <el-select
            v-model="selectedDropDownTag"
            clearable
            size="default"
            placeholder="选择或添加标签"
            filterable
            :suffix-icon="SelectSuffix"
            allow-create
            :disabled="Object.keys(componentConfigurationModel.currentSelected).length === 0"
            @change="handleTagSelectChange"
          >
            <el-option
              v-for="item in componentConfigurationModel.dropDownTagOptions"
              :key="item"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ArrowUp, ArrowDown, QuestionFilled } from "@element-plus/icons";
import { ComponentConfigurationModel } from "./ComponentConfigurationModel";
import SelectSuffix from "@/modules/model/comps/common/SelectSuffix.vue";

const selectedOperation = ref<string | undefined>("");
const selectedDropDownTag = ref<string | undefined>("");

const props = defineProps<{
  componentConfigurationModel: ComponentConfigurationModel;
  // treeSelectModel: TreeSelectModel
}>();
const currentIndex = ref(-1);
const currentParentIndex = ref(-1);

const changeShowComps = (index: number) => {
  props.componentConfigurationModel.siderbarConfig[index].showComps = !props.componentConfigurationModel.siderbarConfig[index].showComps;
};

const handleMousedown = e => {
  if (e.target && !e.target.className.includes("comp-item")) {
    currentIndex.value = -1;
    props.componentConfigurationModel.confirmSelectComp(-1, -1);
  }
};

const handleOperationVisibletChange = (value: boolean) => {
  if (value) {
    props.componentConfigurationModel.getOperationOptions();
  }
};

const handleOperationSelectChange = (val: string) => {
  props.componentConfigurationModel.changeOperation(val, currentParentIndex.value, currentIndex.value);
};

const handleTagSelectChange = (val: string) => {
  props.componentConfigurationModel.changeDropDownTag(val, currentParentIndex.value, currentIndex.value);
};

const handleClickItem = (parentIndex, index, comp) => {
  if (props.componentConfigurationModel.isModelDisabled) return;
  if (currentIndex.value === index) {
    currentIndex.value = -1;
    props.componentConfigurationModel.confirmSelectComp(-1, -1);
  } else {
    currentParentIndex.value = parentIndex;
    currentIndex.value = index;
    props.componentConfigurationModel.confirmSelectComp(parentIndex, index);
  }
  selectedDropDownTag.value = comp.dropdownTag ? comp.dropdownTag : "";
  selectedOperation.value = comp.operation ? comp.operation : "";
};

onMounted(() => {
  window.addEventListener("click", handleMousedown);
});
onUnmounted(() => {
  window.removeEventListener("click", handleMousedown);
});
</script>

<style lang="scss">
@import "@/assets/css/theme.scss";
.operation-config {
  width: 100%;
  height: 100%;
  display: flex;
  .operation-config-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid #e4e4e4;
    margin-right: 10px;
  }
  .operation-config-title {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    background-color: $frame-siderbar-bg-color;
    font-weight: bold;
  }
  .group-list-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
    padding-bottom: 16px;
    .group-item {
      display: flex;
      flex-direction: column;
      border-top: 1px solid #e4e4e4;
      box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
      margin-bottom: 16px;
      .group-item-header {
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 8px;
        border-bottom: 1px solid #e4e4e4;
        font-weight: bold;
        .header-left {
          display: flex;
          align-items: center;
        }
        .header-right {
          display: flex;
          align-items: center;
        }
      }
      .group-item-children {
        min-height: 60px;
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        // flex-wrap: wrap;

        .comp-item {
          position: relative;
          height: 24px;
          margin: 0 12px;
          padding: 0 4px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          cursor: pointer;
          .comp-item-img {
            width: 16px;
            height: 16px;
          }
          .comp-item-label {
            margin-left: 4px;
            font-size: 11px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .active {
          border: 1px solid $theme-color;
        }
      }
    }
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }

  .operation-config-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid #e4e4e4;

    .operation-wrap {
      display: flex;
      flex-direction: column;
      padding: 10px;

      .operation-label {
        display: flex;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        margin-bottom: 8px;
        margin-top: 10px;
      }
      .operation-select {
        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>
